<template>
  <div class="order-item">
    <div class="order-info flex-wrap">
      <div class="order-info-item" v-for="item in orderItemList" :key="item.value">
        {{ item.label }}： {{ infoVal(item) }}</div
      >
    </div>
    <div class="order-item-info flex-row" v-for="item in dataSource['orderItemList'] || []">
      <div class="info-card" style="font-size: 18px">{{ item.spuName }}</div>
      <div class="info-card">数量：{{ item.quantity || 0 }}</div>
      <div class="info-card">
        <div>商品金额：￥{{ item.settlementAmount || 0 }}</div>
      </div>
      <div class="info-card">
        <div>展开尺寸：{{ item.productMeasure }}mm</div>
      </div>
      <div class="info-card">
        <div>{{ item.productDesc }}</div>
      </div>
      <div class="info-card">
        <Tag :color="orderStatus['color']">{{ orderStatus['label'] }}</Tag>
      </div>
      <div class="info-card">
        <a @click="toDetail">详情</a>
        <a v-if="dataSource.status === UNPAID" @click="handleChangePrice(item)">改价</a>
      </div>
    </div>

    <ChangePriceModal @register="registerModal" @success="handleChangePriceSuccess" />
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import { Tag } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  import { useModal } from '@/components/Modal';
  import { orderItemList } from '@/views/order/salesOrder/data';
  import { OrderStatusEnum, orderStatusList } from '@/enums/orderEnum';
  import { OrderItemModel, SalesOrderModel } from 'mc-c2b2m-operator-api/types/order';
  import ChangePriceModal from '@/views/order/salesOrder/components/ChangePriceModal.vue';

  const { UNPAID } = OrderStatusEnum;

  const props = defineProps({
    dataSource: {
      type: Object as PropType<SalesOrderModel>,
      default: () => {
        return {};
      },
    },
  });

  const [registerModal, { openModal, closeModal }] = useModal();

  const infoVal = computed(() => {
    return (item: any) => {
      const { value, defaultValue, customRender } = item || {};
      const val = props.dataSource[value];
      return defaultValue || customRender?.(val) || val;
    };
  });

  // 订单状态文本
  const orderStatus = computed(() => {
    return orderStatusList.find((find) => find.value === props.dataSource?.status) || {};
  });

  const router = useRouter();
  const emits = defineEmits(['changePriceSuccess']);

  // 跳转详情
  function toDetail() {
    router.push({ path: '/order/salesOrderDetail', query: { orderId: props.dataSource.orderId } });
  }
  // 改价
  function handleChangePrice(orderItem: OrderItemModel) {
    openModal(true, orderItem);
  }
  // 改价成功
  function handleChangePriceSuccess() {
    closeModal();
    emits('changePriceSuccess');
  }
</script>

<style scoped lang="less">
  .order-item {
    padding: 10px;
    background: #fafafa;
    border-radius: 10px;
    border: 1px solid #eee;
    .order-info {
      position: relative;
      padding: 5px 20px 0 30px;
      .order-info-item {
        width: 25%;
        margin-bottom: 5px;
      }
    }
    .order-item-info {
      height: 100%;
      min-height: 120px;
      border: 1px solid #eee;
      .info-card {
        flex: 1;
        padding: 20px;
        display: flex;
        background: #fff;
        align-items: center;
        flex-direction: column;
        border-right: 1px solid #eee;
        justify-content: space-around;
      }
    }
  }
</style>
